<template>
	<view>
		<!-- #ifdef MP -->
		<view class="custom" :style="{'background':navbg}">
			<uni-nav-bar :status-bar="true" :fixed="true" title="订单详情" color="#ffffff" left-icon="arrowleft" background-color="rgba(255,255,255,0)"
			 @click-left="back">
			</uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="container-header" v-if="orderDetailData.orderStatus==-1">
			<view class="pay-status">交易关闭</view>
			<view class='pay-time'>买家超出时间未付款，交易自动关闭</view>
		</view>
		<view class="container-header" v-else-if="orderDetailData.orderStatus==0">
			<view class="pay-status">订单待支付(￥{{orderDetailData.orderTotalGoodsPrice | money}})</view>
			<view class='pay-time'>剩{{clock}}自动关闭</view>
		</view>
		<view class="container-header" v-else-if="orderDetailData.orderStatus==1">
			<view class="pay-status">买家已付款</view>
			<view class='pay-time'>等待卖家发货</view>
		</view>
		<view class="container-header" v-else-if="orderDetailData.orderStatus==2">
			<view class="pay-status">卖家已发货</view>
			<!-- <view class='pay-time'>买家超出时间未付款，交易自动关闭</view> -->
		</view>
		<view class="container-header" v-else-if="orderDetailData.orderStatus==3">
			<view class="pay-status">交易成功</view>
		</view>
		<view class="container-header" v-else-if="orderDetailData.orderStatus==4">
			<view class="pay-status">已评价</view>
		</view>
		<view class="uni-list">
			<!-- <view class="address-section">
				<view class="order-content" style="align-items: center;">
					<image src="../../static/home/order/kuaidi.png" mode="widthFix"></image>
					<view class="cen">
						<view class="top">
							<text class="name">快件已从杭州转运中心公司发出，下一站南昌转运中心</text>
							<text class="mobile  ">{{addressData.mobile}}</text>
						</view>
						<text class="address">{{addressData.address}} {{addressData.area}}</text>
					</view>
					<text class="yticon icon-you"></text>
				</view>
			</view> -->
			<view class="address-section">
				<view class="order-content">
					<image src="../../static/home/store/address.png" mode="widthFix"></image>
					<view class="cen">
						<view class="top">
							<text class="name">{{orderDetailData.addressVo.name}}</text>
							<text class="mobile">{{orderDetailData.addressVo.mobile}}</text>
						</view>
						<text class="address">{{orderDetailData.addressVo.province}} {{orderDetailData.addressVo.city}}{{orderDetailData.addressVo.area}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-section">
			<view class="g-header ">
				<image class="logo" src="../../static/home/order/store.png" mode="widthFix"></image>
				<text class="name">{{orderDetailData.shopName}}</text>
				<text class="yticon icon-you"></text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,index) in orderDetailData.orderDetailReturnVoList" :key="index">
				<image :src="item.goodsPic"></image>
				<view class="right">
					<text class="title clamp">{{item.goodsTitle}}</text>
					<text class="spec">{{item.goodsSpecText}}</text>
					<view class="price-box">
						<text class="price">￥{{item.goodsPrice | money}} <text class="num">x{{item.goodsNumber}}</text> </text>
						<!-- <view class="cancle-price">
							退款成功
						</view> -->
					</view>
				</view>
			</view>
			<!-- 优惠明细 -->
			<view class="yt-list">
				<view class="yt-list-cell ">
					<text class="cell-tit clamp">配送方式</text>
					<text class="cell-tip ">
						{{orderDetailData.expressMethod==1?'快递运输':'门店自提'}}
					</text>
				</view>
				<view class="yt-list-cell ">
					<text class="cell-tit clamp">价格类型</text>
					<text class="cell-tip" v-if="orderDetailData.priceType==1">企业会员</text>
					<text class="cell-tip" v-else-if="orderDetailData.priceType==2">钻卡会员</text>
					<text class="cell-tip" v-else-if="orderDetailData.priceType==3">贵宾会员 </text>
					<text class="cell-tip" v-else>普通会员</text>
				</view>
				<view class="yt-list-cell ">
					<text class="cell-tit clamp">开具发票</text>
					<text class="cell-tip">{{orderDetailData.invoiceName==''?'不需要发票':orderDetailData.invoiceName}}</text>
				</view>
				<view class="yt-list-cell ">
					<text class="cell-tit clamp">备注</text>
					<text class="cell-tip">{{orderDetailData.shopOrderNote}}
					</text>
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell ">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{orderDetailData.orderTotalGoodsPrice | money}}</text>
			</view>
			<view class="yt-list-cell ">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥{{orderDetailData.orderTotalExpressPrice | money}}</text>
			</view>
			<view class="yt-list-cell ">
				<text class="cell-tit clamp" style="display:flex;justify-content: flex-end;">需付款: <text class="pay-price">￥{{orderDetailData.orderTotalPrice | money}}</text>
				</text>
			</view>
		</view>

		<!-- 银两 -->
		<view class="yt-list">
			<view class="yt-list-cell ">
				<text class="cell-tit " style="color: #8E8E93;">银两</text>
				<text class="cell-tip">获得{{orderDetailData.silver }}个银两</text>
			</view>
			<view class="yt-list-cell ">
				<text class="cell-tit " style="color: #8E8E93;">订单编号</text>
				<text class="cell-tip">{{orderDetailData.orderNumber}}</text>
			</view>
			<view class="yt-list-cell ">
				<text class="cell-tit " style="color: #8E8E93;">下单时间</text>
				<text class="cell-tip">{{orderSubmitTime}}</text>
			</view>
			<view class="yt-list-cell ">
				<text class="cell-tit " style="color: #8E8E93;">联系商家</text>
				<text class="cell-tip store">致电商家</text>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer" v-if="orderDetailData.orderStatus==-1">
			<view class="cancle"  @click="deleteOrder()">删除订单</view>
		</view>
		<view class="footer" v-else-if="orderDetailData.orderStatus==0">
			<view class="cancle"  @click="toggleMask('show')">取消订单</view>
			<view class="submit" @click="payOrder()">去支付</view>
		</view>
		<view class="footer" v-else-if="orderDetailData.orderStatus==1">
			<view class="cancle" @click="tipPostPro()">提醒发货</view>
		</view>
		<view class="footer" v-else-if="orderDetailData.orderStatus==2">
			<view class="cancle" @click="submit">查看物流</view>
			<view class="sure" @click="Receipt()">确认收货</view>
		</view>
		<view class="footer" v-else-if="orderDetailData.orderStatus==3">
			<view class="sure" @click="navTo('rate')">评价</view>
		</view>
		<view class="footer" v-else-if="orderDetailData.orderStatus==4">
			
		</view>
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="cancle-title">
					<view class="info">
						<text class="">取消订单</text>
						<image src="../../static/useCenter/delete-img.png" mode="widthFix" @click="toggleMask"></image>
					</view>
					<view class="color999 font28">
						请选择取消订单的原因
					</view>
				</view>
				<radio-group @change="radioChange">
					<view class="yt-list">
						<label class="yt-list-cell " v-for="(item, index) in items" :key="item.value">
							<text class="cell-tit ">{{item.name}}</text>
							<view>
								<radio color="rgba(255, 94, 0, 1)" :value="item.value" :checked="index === current" />
							</view>
						</label>
					</view>
				</radio-group>
				<view class="sure-cancle" @click="sureCancle()">
					确认取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import {
		js_date_time,
		money
	} from '@/common/util'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	export default {
		components: {
			uniNavBar,
			uniIcon,
		},
		data() {
			return {
				navbg: 'rgba(255,94,0,0)',
				statusBarHeight: statusBarHeight,
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				orderDetailData: {}, //详情数据
				couponList: [{
						title: '新用户专享优惠券',
						price: 5,
					},
					{
						title: '庆五一发一波优惠券',
						price: 10,
					},
					{
						title: '优惠券优惠券优惠券优惠券',
						price: 15,
					}
				],
				addressData: {
					name: '许小星',
					mobile: '13853989563',
					addressName: '金九大道',
					address: '山东省济南市历城区',
					area: '149号',
					default: false,
				},
				items: [{
						value: '0',
						name: '我不想买了'
					},
					{
						value: '1',
						name: '地址信息填写错误'
					},
					{
						value: '2',
						name: '商品无货'
					},
					{
						value: '3',
						name: '其他原因'
					},
				],
				// current: 0,
				total_micro_second: 0, //剩余时间
				clock: '00:00:00', //计时
				orderSubmitTime:'',//下单时间
				cancleObj:{},
				optins:{}
			}
		},
		//事件监听滚动条
		onPageScroll: function(Object) {
			var scrollTop = (Object.scrollTop) / 100
			this.navbg = "rgba(255,94,0," + scrollTop + ")"
		},
		onLoad(option) {
			this.optins = option;
			this.loadDetail(this, option);
		},
		
		methods: {
			/**
			 * @param {Object} type订单详情数据
			 */
			loadDetail(that, option) {
				that.$http.request({
						method: 'GET', // 请求方法必须大写
						url: that.$requestApi.orderDetail + "/" + option.shopId + "/" + option.orderNumber,
						data: {}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							 that.$nextTick(() => {
							  
							that.orderDetailData = _data.result;
							var orderSubmitTime = _data.result.orderSubmitTime;
							that.orderSubmitTime = js_date_time(orderSubmitTime);
							var endTime = that.minutesTest(js_date_time(orderSubmitTime));
							var nowTime = that.currentTime();
							var total_micro_second = endTime - nowTime;
							if (total_micro_second <= 0) {
								that.clock = '00:00:00';
								return;
							} else {
								that.countdown(total_micro_second );
							}
							})
						}
					})
			},
			/**
			 * @param {Object} creaTime去支付
			 */
			// 付款
			payOrder() {
				let that = this;
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.wxpayAppPay,
						data: {
							cid: that.orderDetailData.shopCid,
							orderId: that.orderDetailData.orderNumber,
							flag:0
						}
					})
					.then(result => {
						let _data = result.data;
						console.log(_data)
						if (_data.code === 200) {
							uni.requestPayment({
								timeStamp: _data.result.timeStamp,
								nonceStr: _data.result.nonceStr,
								package: _data.result.package,
								signType: _data.result.signType,
								paySign: _data.result.paySign,
								success: function(result) {
									uni.showToast({
										title: '支付成功',
										icon: "success",
										mask: true,
										success: function() {
											that.$Router.replace({name:'paySuccess',params:{price:orderDetailData.orderTotalPrice}});
										}
									})
								},
								fail: function(results) {
									console.log(result)
									uni.showToast({
										title: '支付失败,请重新支付',
										icon: "none",
										success() {
											
										}
									})
								},
								complete: function(data) {
									console.log(data)
								}
							})
						}
					})
			},
			//结束时间格式化
			minutesTest(creaTime) {    
				var time = new Date(Date.parse(creaTime.replace(/-/g, '/')));
				var times = time.setMinutes(time.getMinutes() + 15); 
				let now = time.getFullYear() + "-" + this.fill_zero_prefix((parseInt(time.getMonth()) + 1)) + "-" + this.fill_zero_prefix(time.getDate()) + " " + time.getHours() + ":" + this.fill_zero_prefix(time.getMinutes()) + ":" + this.fill_zero_prefix(time.getSeconds());
				let nows = this.str2Stamp(now);
				return nows;
			},
			//当前时间格式化
			currentTime() {
				var time = new Date();
				var now = time.getFullYear() + "-" + this.fill_zero_prefix((parseInt(time.getMonth()) + 1)) + "-" + this.fill_zero_prefix(time.getDate()) + " " + time.getHours() + ":" + this.fill_zero_prefix(time.getMinutes()) + ":" + this.fill_zero_prefix(time.getSeconds());
				let nows = this.str2Stamp(now);
				return nows;
			},
			str2Stamp(time) {
				var date = time.substr(0, 10)
				var hour = time.substr(11, 2) == '00' ? 0 : time.substr(11, 2).replace(/\b(0+)/gi, "");
				var minute = time.substr(14, 2) == '00' ? 0 : time.substr(14, 2).replace(/\b(0+)/gi, "");
				var second = time.substr(17, 2) == '00' ? 0 : time.substr(17, 2).replace(/\b(0+)/gi, "");
				var timestamp = parseInt(new Date(date).getTime() / 1000) + parseInt(hour) * 3600 + parseInt(minute) * 60 + parseInt(second) - 28800;
				return new Date(timestamp * 1000);
			},
			/* 分秒位数补0 */
			fill_zero_prefix(num) {
				return num < 10 ? "0" + num : num
			},
		
			countdown: function(tim) {
				// 渲染倒计时时钟
				var that = this;
				setTimeout(function() {
					tim -= 1000;
					that.total_micro_second = tim;
					that.clock = that.dateformat(tim)
					if (tim <= 0) {
						that.clock = '00:00:00'
						that.tim = 0
					}
					that.countdown(tim);
				}, 1000)
			},

			// 时间格式化输出，如11:03 25:19 每1s都会调用一次
			dateformat: function(micro_second) {
				// 总秒数
				var second = Math.floor(micro_second / 1000);
				// 小时
				var hr = Math.floor(second / 3600 % 24);
				// 分钟
				var min = Math.floor(second / 60 % 60);
				// 秒
				var sec = Math.floor(second % 60);
				return min + "分钟" + sec + "秒";
			},
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			sureCancle() {
				let that = this;
				that.cancleObj['orderNumber'] = that.orderDetailData.orderNumber;
				that.cancleObj['shopId'] = that.orderDetailData.shopId;
				
				that.maskState = 0;
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderCancle,
						data: that.cancleObj
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							
							that.$api.msg('取消成功');
							setTimeout(function(){
								that.loadDetail(that,that.cancleObj);
							},600)
						}
					})
			},
			
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				this.cancleObj['reason'] = this.items[this.current].name;
			},
			back() {
				this.$Router.back(1)
			},
			// 删除订单
			deleteOrder() {
				let that = this;
				uni.showModal({
					title: '确定删除吗？',
					content: '删除后将无法恢复，请谨慎操作。',
					success: function(res) {
						if (res.confirm) {
							that.$api.msg('删除成功	');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 确认收货
			Receipt() {
				let that = this;
				
				let shopId = that.orderDetailData.shopId;
				let cid = that.orderDetailData.shopCid;
				let orderNum = that.orderDetailData.orderNumber;
				
				
				uni.showModal({
					content: '确认收货吗',
					success: function(res) {
						if (res.confirm) {
							that.$http.request({
									method: 'PUT', // 请求方法必须大写
									url: that.$requestApi.orderConfirm+"/"+shopId+"/"+orderNum,
									data:{}
								})
								.then(result => {
									let _data = result.data;
									if (_data.code === 200) {
										that.$api.msg('确认收货成功');
										that.onLoad(that,that.optins)
										that.$Router.push({name:'rate',params:{orderId:orderNum,cid:cid}})
									}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 跳转
			navTo(url) {
				let cid = this.orderDetailData.shopCid;
				let orderNum = this.orderDetailData.orderNumber;
				this.$Router.push({
					name: url,
					params:{orderId:orderNum,cid:cid}
				})
			},
			// 提醒发货
			tipPostPro() {
				this.$api.msg('已提醒卖家发货');
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	/* #ifdef MP */
	.custom {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	/* #endif */
	.container-header {
		height: 350upx;
		width: 100%;
		background-color: #FF5E00;
		padding-top: 200upx;

		.pay-status {
			padding: 0 30upx;
			font-size: 40upx;
			color: #fff;
		}

		.pay-time {
			margin-top: 10upx;
			padding: 0 30upx;
			font-size: 28upx;
			color: #fff;
		}
	}

	.uni-list {
		position: relative;
		top: -20upx;
		border-radius: 20upx 20upx 0 0;
		width: 100%;
		background: #fff;

		.address-section {
			padding: 30upx;
			position: relative;

			.order-content {
				display: flex;

				image {
					width: 28upx;
					height: auto;
					margin-top: 10upx;
				}
			}

			.icon-shouhuodizhi {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90upx;
				color: #888;
				font-size: 44upx;
			}

			.cen {
				display: flex;
				flex-direction: column;
				flex: 1;
				font-size: 28upx;
				color: $font-color-dark;
				padding-left: 20upx;
			}

			.name {
				font-size: 28upx;
				margin-right: 24upx;
			}

			.address {
				margin-top: 16upx;
				margin-right: 20upx;
				color: $font-color-light;
			}

			.a-bg {
				position: absolute;
				left: 0;
				bottom: 0;
				display: block;
				width: 100%;
				height: 5upx;
			}
		}

		&::before {
			height: 0;
		}

		&::after {
			height: 0;
		}

		.uni-list-cell {
			&::after {
				height: 0;
			}
		}

		.uni-list-cell-db {
			font-size: 26upx;
			display: flex;
			align-items: center;
			font-weight: bold;

			image {
				width: 36upx;
				height: auto;
				margin-right: 20upx;
			}
		}
	}


	.goods-section {
		margin-top: 10upx;
		background: #fff;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 36upx;
			height: auto;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-left: 10upx;
			position: relative;
			top: 4upx;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 180upx;
				height: 180upx;
				border-radius: 20upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 40upx;
				justify-content: space-between;

				.price {
					margin-bottom: 4upx;
					color: #FE2130;
					font: 40upx;
				}

				.num {
					width: 60upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					display: inline-block;
					color: #8E8E93;
					font-size: 24upx;
					margin-left: 10upx;
				}

				.cancle-price {
					height: 50upx;
					line-height: 50upx;
					padding: 0 35upx;
					display: inline-block;
					font-size: 24upx;
					color: #0B0E11;
					border-radius: 60upx;
					border: 1upx solid #707070;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 30upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}


		.title {
			font-size: 26upx;
			color: #0B0E11;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #0B0E11;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-8e8;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		.store {
			width: 150upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			font-size: 24upx;
			color: #fff;
			border-radius: 4upx;
			background-color: #FF5E00;
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.pay-price {
			font-size: 34upx;
			color: #FE2130;
		}
	}


	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: flex-end;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 70upx;
			color: #fff;
			font-size: 28upx;
			background-color: #FF2300;
			border-radius: 60upx;
			margin-right: 36upx;
		}

		.cancle {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70upx;
			width: 180upx;
			color: #8E8E93;
			font-size: 28upx;
			border-radius: 60upx;
			border: 1upx solid #707070;
			margin-right: 36upx;
		}

		.sure {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70upx;
			width: 180upx;
			color: #FF5E00;
			font-size: 28upx;
			border-radius: 60upx;
			border: 1upx solid #FF5E00;
			margin-right: 36upx;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			max-height: 70vh;
			background: #fff;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
			border-radius: 30upx 30upx 0 0;
			padding: 60upx 0 0 0;

			.sure-cancle {
				width: 690upx;
				margin: 40upx auto;
				background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
				text-align: center;
				height: 70upx;
				line-height: 70upx;
				border-radius: 40upx;
				font-size: 36upx;
				color: #fff;
			}

			.cancle-title {
				position: relative;
				padding: 0 30upx;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 42upx;
						height: auto;
						margin-right: 10upx;
					}
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}
</style>
